import React, {Component} from 'react'
import '../sass/SearchHistory'


export default class SearchHistory extends Component {
  constructor() {
    super()
  }

  render() {
    const {searchByHistroy, clearSearchHistory, searchHistory} = this.props

    if(searchHistory.length){
      return (
        <section className="search-history">
          <div className="history-title">搜索历史</div>
          <ul className="history-list">
            {
              searchHistory.map((item, id) => {
                return (
                  <li
                    key={id}
                    className="history-item"
                    onClick={searchByHistroy.bind(this, item)}
                  >
                    <span>{item}</span>
                  </li>
                )
              })
            }
          </ul>
          <div className="action-div">
            <span className="action" onClick={clearSearchHistory.bind(this)}>清空历史记录</span>
          </div>
        </section>
      )
    }else{
      return (
        <section className="search-history"></section>
      )
    }
  }
}
